<template>
    <div>
         <vheader :ismini="iscollapse" :clientWidth="clientWidth"></vheader>
         <el-container style="border:0px solid #e3e3;" id="content_module">
            <el-main>
                <el-row :gutter="20">
                    <el-col :push="1" :span="22" :sx="22" :sm="22" :md="22" :lg="22" :xl="22" style="overflow:hidden;overflow-y:auto;padding:5px 20px 15px 20px;font-size:20px;border-bottom:1px solid #e3e3e3;margin-bottom:20px;">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                          <el-breadcrumb-item :to="{ path: '/subjectlist' }">主题</el-breadcrumb-item>
                          <el-breadcrumb-item>{{subjectname}}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                    <el-col :push="1" :span="4" :sx="4" :sm="4" :md="4" :lg="4" :xl="4" class="vleft_content" style="overflow:hidden;overflow-y:auto;padding:0px;">
                        <vleft :subjectid="sid" :attributeid="aid" :iscollapse="iscollapse" page="contentshow"></vleft>
                    </el-col>
                    <el-col :push="1" :span="18" :sx="18" :sm="18" :md="18" :lg="18" :xl="18" class="vRight_content"  style=" overflow:hidden;overflow-y:auto;">
                        <vContentMain :subjectid="sid" :attributeid="aid" mode="show" :iscollapse="iscollapse"></vContentMain>
                    </el-col>
                </el-row>
                
            </el-main>
        </el-container>
         <vfooter></vfooter>
    </div>
</template>
<script>
import vheader from "../common/Header";
import vfooter from "../common/Footer";
import vContentMain from "../common/ContentEditMain";
import { page, page_rule } from "../../data/base_data";
import { baseUrl, routerMode, baseImgPath } from "../../config/env";
import vleft from "../common/Left";
//接口
export default {
  data() {
    return {
      iscollapse: false,
      clientWidth:1300,
      baseDate: {
        curpage: {}
      },
      subjectname:"",
      sid: 0,
      aid: 0
    };
  },
  watch: {
    $route: "fetchData"
  },
  components: {
    vheader,
    vfooter,
    vleft,
    vContentMain
  },
  methods: {
    fetchData: function() {
      this.sid = this.$route.params.sid;
      this.aid = this.$route.params.aid;
      // this.$message({
      //   message: "你切换了主题" + this.sid + "属性为：" + this.aid,
      //   type: "success"
      // });
      this.loadSubjectByID();
    },
    handleSelect(key, keyPath) {
      // debugger
      // this.$router.push({ path : keyPath});
      console.log(key, keyPath);
    },
    loadSubjectByID: function() {
      if(!this.sid) return;
      this.baseDate.curpage = page;
      var rule = {
        Field: "Id",
        Value: this.sid,
        Operate: 3
      };
      this.baseDate.curpage.FilterGroup.Rules = [rule];
      this.$http
        .post(baseUrl + "api/Admin/ContrastSubject/Read", this.baseDate.curpage)
        .then(
          function(res) {
            this.subjectname = res.body.Rows[0].FullName;
          },
          function(res) {
            alert("操作数据获取失败");
          }
        );
    }
  },
  mounted: function() {
    this.baseDate.curpage = page;
    let self = this;
    window.onresize = function() {
      self.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      self.clientWidth = document.documentElement.clientWidth;
      $(".el-main").height(self.clientHeight - 130);

      //获取宽度
      self.iscollapse = self.clientWidth < 768;
      // $("#content_module").height(self.clientHeight);
      $(".vleft_content").height("100%");
      $(".vRight_content").height("100%");

      //获取宽度
      self.iscollapse = self.clientWidth < 768;
    };
    window.onresize();
  },
  created() {
    this.fetchData();
  }
};
</script>
<style scoped>
.el-main{
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    margin-top:10px;
}

@media screen and (min-height: 375px) { 
  .el-main{
      display: block;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -ms-flex-preferred-size: auto;
      flex-basis: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
  }
} 
#content_module {
  padding: 0;
  margin: 0 auto;
}
</style>